<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
         body{
            background-color: #eee;
        }
            #sjl{
                margin: 20px auto;
                width: 400px;
                height: 550px;
                background-color: white;
                border: 5px solid white;
                transition: border-color 1s;
            }
            #sjl:hover{
                border-color:orange;
            }
            #sjl img{
                width: 390px;
                height: 430px;
                margin: 5px;
                padding: 0;
            }
            #sjl p{
                margin-left: 30px;
                margin-right: 30px;
                font-size: 13px;
                line-height: 1.5;
            }
            #zz{
                margin: 10px auto;
                width: 400px;
                height: 200px;
                background-color: white;
            }
            #zz ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #zz ul li{
                display: block;
                margin: 10px;
                width: 180px;
                height: 180px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                float: left;
                position: relative;
            }
            #zz ul li:nth-of-type(1){
                background-image: url(../img/big_1.jpg)
            }
            #zz ul li:nth-of-type(2){
                background-image: url(../img/big_2.jpg)
            }
            #zz ul li div{
                width: 180px;
                height: 180px;
                overflow: hidden;
                position: relative;
            }
            #zz ul li div div{
                width: 180px;
                height: 180px;
                color: white;
                position: absolute;
                left: -180px;
                /*background-color: red;*/
                
            }
            #zz ul li section{
                width: 180px;
                height: 180px;
                position: absolute;
                top: 0;
                background-color: gray;
                opacity: 0;
                /*z-index: 99;*/
                /*transition: background-color 1s;*/

            }
            #zz ul li div h3{
                margin-left: 10px;
                font-size: 14px;
                color: white;
                display: inline-block;
                padding-top: 30px;
                
            }
            #zz ul li div p{
                color: white;
                font-size: 13px;
                margin: 10px;
                font-weight: bold;
                
            }
        </style>
    </head>
    <body>
        <div id="sjl">
            <img src="../img/sjl.jpg" alt="">
            <p>【斯嘉丽】设计上运用了多层层叠设计，形成立体到访的花苞视觉效果，创意独特。浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质的雪纺面料让小衫更显质感穿着凉爽透气，做工也相当考究</p>
        </div>
        <div id="zz">
            <ul>
                <li>
                    <div>
                        <section class="bg"></section>
                        <div id="div1">
                            <h3>special品牌旗舰店</h3>
                            <p>最具传奇浪漫色彩的欧洲经典设计 给你带来传输的魅力。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <section class="bg"></section>
                        <div id="div2">
                            <h3>sophy品牌旗舰店</h3>
                            <p>新版韩版微笑性感红唇上衣圆领女袖短修身T恤。</p>
                    </div>
                </li>
                <div style="clear: both"></div>
            </ul>
        </div>
    </body>
</html>

<script>
    var li = $('#zz ul li');
    
    li.hover(function(){
        $(this).children('div').children('div').stop().animate({
            left:0,
            // queue true or false  true 设定此动画进入动画队列 false反之
        },{queue:false,duration:180});
        $(this).children('div').children('.bg').animate({
            opacity:0.5
        },100)
    },function(){
       $(this).children('div').children('div').stop().animate({
            left:-180,
        },{queue:false,duration:180});
        $(this).children('div').children('.bg').animate({
            opacity:0,
        },100)
    })

    
</script>